<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章信息添加</title>
    <script type="text/javascript" src="/static/js/jquery.js"></script>
    <script type="text/javascript" src="/static/js/MyAjaxForm.js"></script>
    <script src="/static/js/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
    <script src="/static/js/Ckeditor/ckeditor.js" type="text/javascript"></script>
    <link src="/static/css/tableStyle.css" rel="stylesheet" />
    <style type="text/css">
        textarea, select {
            padding: 2px;
            border: 1px solid;
            border-color: #666 #ccc #ccc #666;
            background: #F9F9F9;
            color: #333;
            resize: none;
            width: 100%;
        }

        .textbox {
            padding: 3px;
            border: 1px solid;
            border-color: #666 #ccc #ccc #666;
            background: #F9F9F9;
            color: #333;
            resize: none;
            width: 100%;
        }

        .textbox:hover, .textbox:focus, textarea:hover, textarea:focus {
            border-color: #09C;
            background: #F5F9FD;
        }
    </style>
</head>
<body>
<div>
    <form  data-ajax="true" data-ajax-method="post" data-ajax-success="afterAdd" data-ajax-url="/Admin/ArticleInfo/AddArticle" id="form1">
        <table style="width:auto; margin: 0 auto">
            <tr>
                <td>简短标题:</td>

                <td>
                    <input type="text" name="title" maxlength="160" class="textbox" id="title" /></td>


            </tr>
            <tr>
                <td>完整标题:</td>
                <td colspan="4">
                    <input type="text" name="Fulltitle" class="textbox" id="Fulltitle" /></td>
            </tr>
            <tr>
                <td>归属栏目:</td>
                <td colspan="4">
                {{range .articleClass}}
                    <input type="radio" value="{{.Id}}" name="className">{{.ClassName}}
                {{end}}
                </td>
            </tr>
            <tr>
                <td>关 键 字</td>
                <td colspan="4">
                    <input type="text" name="KeyWords" class="textbox" id="KeyWords" /></td>
            </tr>
            <tr>
                <td>文章作者:</td>
                <td colspan="4">
                    <input type="text" name="Author" class="textbox" id="Author" />&nbsp;&nbsp;【<a href="#" class="authorClick">未知</a>】【<a href="#" class="authorClick">佚名</a>】【<a href="#" class="authorClick">Itcast</a>】</td>
            </tr>
            <tr>
                <td>文章来源:</td>
                <td colspan="4">
                    <input name="Origin" id="Origin"  value="" size="50" class="textbox" type="text">&nbsp;&nbsp;【<a href="#" class="originInfo">不详</a>】【<a href="#" class="originInfo">本站原创</a>】【<a href="#" class="originInfo">互联网</a>】</td>
            </tr>
            <tr>
                <td>文章导读</td>
                <td colspan="4">
                    <textarea class="textbox" name="Intro" style="width: 95%; height: 80px"></textarea></td>
            </tr>
            <tr>
                <td>文章内容</td>
                <td colspan="4">
                    <textarea class="ckeditor" onblur="getData2()" id="ArticleContent2" name="ArticleContent1" rows="30" cols="40" style="width: 95%; height: 80px"></textarea>
                    <script type="text/javascript">
                        //<![CDATA[
                        // Replace the <textarea id="editor1"> with an CKEditor instance.

                        var editor = CKEDITOR.replace('ArticleContent2');


                        //]]>
                    </script>
                    <textarea class="textbox"  name="ArticleContent" id="txtArticleContent" rows="30" cols="40" style="display:none"></textarea>
                </td>
            </tr>
            <tr>
                <td>图片地址:</td>
                <td colspan="4">
                    <input type="file" name="fileUp" />
                    <input type="button" value="上传图片" id="btnFileUp" />
                    <div id="showImage"></div>


                    <input name="PhotoUrl" id="PhotoUrl" value="" type="hidden">

                    <input name="InsertEditContent" id="InsertEditContent" value="1" type="checkbox">图片是否插入编辑器
                </td>
            </tr>
        </table>
    </form>
</div>
</div>
</body>
<script type="text/javascript">
    $(function () {
        bindFileUp();
        CKEDITOR.instances["ArticleContent2"].on("blur", function () {
            //获取编辑器内容。
            var oEditor = CKEDITOR.instances.ArticleContent2;//找到编辑器
            var content = oEditor.getData();//获取编辑器中的数据
            $("#txtArticleContent").val(content);//将获取到的值插入到txtArticleContent整个文本域中
            // console.log($("#txtArticleContent").val())
        });
    })
    $(".authorClick").click(function () {
        $("#Author").val($(this).text());
    });
    //添加原创
    $(".originInfo").click(function () {
        $("#Origin").val($(this).text());
    });
    function bindFileUp() {
        $("#btnFileUp").click(function () {
            $("#form1").ajaxSubmit({
                success: function (data) {

                    if (data.flag == "ok") {
                        var imgurl=data.msg.substr(1)
                        $("#showImage").html("<img src='" + imgurl + "' width='50px' height='50px'/>");
                        $("#PhotoUrl").val(imgurl);

                        //判断是否选择了"图片是否插入编辑器"
                        var flag = $("#InsertEditContent").is(":checked");
                        if (flag) {
                            var oEditor = CKEDITOR.instances.ArticleContent2;//找到编辑器
                            if (oEditor.mode == 'wysiwyg') {//what you see is what you get  所见即所得
                                var img = "<img src='"+imgurl+"'/>";
                                oEditor.insertHtml(img);//将上传成功的图片插入到编辑器中。
                            }
                            else
                                alert('You must be in WYSIWYG mode!');
                        }
                    }else {
                        $.messager.alert("提示",data.msg,"error");
                    }
                },
                error: function (error) { alert(error); },
                url: '/Admin/ArticleInfo/FileUp', /*设置post提交到的页面*/
                type: "post", /*设置表单以post方法提交*/
                dataType: "json" /*设置返回值类型为文本*/
            });

        });
    }
    function subForm() {
        $("#form1").submit();
    }
    function afterAdd(data) {
        window.parent.afterArticleAdd(data);
    }
</script>
</html>